<template>
  <div class="index" style=" font-size: 0.25rem; padding: 0.3rem; background: #F6F8FB;">

    <div style="background: #fff; border-radius: 0.1rem; overflow: hidden;  box-shadow: 0 0 10px #ddd;">
      <div v-html="item.description"></div>
      <div style="background: #F6F8FB; padding: 0.3rem;  border-radius: 0.1rem;">
        <div class="mb10 flexc"> <img src="https://gperson.gantanhaokeji.top/waibugongjuico7.png" style="width: 20px; margin-right: 10px;">
          <div style="width: 1.6rem; color: #020C1D; ">上下架状态：</div>
          <div style="color: #787D85;">
            <span v-if="item.status == 100">上架</span>
            <span v-if="item.status == 0">下架</span>
          </div>
        </div>
        <div class="mb10 flexc"> <img src="https://gperson.gantanhaokeji.top/waibugongjuico6.png" style="width: 20px; margin-right: 10px;">
          <div style="width: 1.6rem; color: #020C1D;">上线时间：</div>
          <div style="color: #787D85;">{{item.created_at}}</div>
        </div>
        <div class="mb10 flexc"> <img src="https://gperson.gantanhaokeji.top/waibugongjuico5.png" style="width: 20px; margin-right: 10px;">
          <div style="width: 1.6rem; color: #020C1D;">开卡年龄：</div>
          <div style="color: #787D85;">{{item.min_age}}-{{item.max_age}}</div>
        </div>
        <div class="mb10 flexc"> <img src="https://gperson.gantanhaokeji.top/waibugongjuico4.png" style="width: 20px; margin-right: 10px;">
          <div style="width: 1.6rem; color: #020C1D;">合约期：</div>
          <div style="color: #787D85;">{{item.contract}}</div>
        </div>
        <div class="mb10 flexc"> <img src="https://gperson.gantanhaokeji.top/waibugongjuico3.png" style="width: 20px; margin-right: 10px;">
          <div style="width: 1.6rem; color: #020C1D;">快递方式：</div>
          <div style="color: #787D85;">{{item.express}}</div>
        </div>
        <div class="mb10 flexc"> <img src="https://gperson.gantanhaokeji.top/waibugongjuico2.png" style="width: 20px; margin-right: 10px;">
          <div style="width: 1.6rem; color: #020C1D;">激活方式：</div>
          <div style="color: #787D85;">{{item.activation_method}}</div>
        </div>
        <div class="mb10 flexc"> <img src="https://gperson.gantanhaokeji.top/waibugongjuico1.png" style="width: 20px; margin-right: 10px;">
          <div style="width: 1.6rem; color: #020C1D;">支持选号：</div>
          <div style="color: #787D85;">
            <span v-if="item.take_number > 0">支持</span>
            <span v-if="item.take_number == 0">不支持</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>

  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;

  export default {
    name: 'shangpinliebiao',
    data() {
      return {
        item:{

        }
      }
    },
    created() {
      this.item = JSON.parse(localStorage.getItem('xq'))


    },
    mounted() {

    },
    methods: {


    }
  }
</script>


<style scoped lang="less">
  .mb10{ margin-bottom: 0.2rem;}
</style>
